<template>
	<view class="mainbgc">
		<header-top :messageInfo="{typeFlag:true,message:'商品档案',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content">
					<view class="add margin_right" @click="jumpurl('/pages/workbench/jiben/shangpindaadd',19)"></view>
				</view>
			</view>
		</header-top>
		<view class="mainpadding2">
			<view class="flexbetween">
				<input class="input-text" type="text" placeholder="请输入商品名称/助记名/条形码/商品编号" v-model="keyword">
				<view class="sousuo" @click="init">搜索</view>
			</view>
			<view class="flexaround margin_top">
				<view :class="status==''?'strongtext1':'nostrongtext'" @click="changeStatus('')">全部</view>
				<view :class="status=='normal'?'strongtext1':'nostrongtext'" @click="changeStatus('normal')">上架</view>
				<view :class="status=='hidden'?'strongtext1':'nostrongtext'" @click="changeStatus('hidden')">下架</view>
			</view>
			<view class="flexaround margin_top">
				<view class="namecolor">共计：{{dataAll.total_num}}个</view>
				<view class="namecolor" style="color: #1ED76D;">上架：{{dataAll.sj_num}}个</view>
				<view class="namecolor" style="color: #ff0000;">下架：{{dataAll.xj_num}}个</view>
			</view>
			<view class="flexcenter" v-if="!list.total">
				<view class="placeholderimage"></view>
			</view>
			<view class="ffffff radius mainpadding_top" style="position: relative;" v-for="item in list.data"
				:key="item.id" @click="selectRole(item)">
				<view class="xiaobig" v-if="item.activity_names">{{item.activity_names}}</view>
				<view class="flexleft needbotborder">
					<view class="leftimg">
						<image :src="item.image_text" mode=""></image>
					</view>
					<view class="margin_left" style="width: 100%;">
						<view class="strongtext">{{item.name}}</view>
						<view class="xiaohui margin_top1">{{item.goods_num}}</view>
						<view class="flexbetween margin_top1">
							<view class="xiaohui ">{{getGuige(item)}}种规格</view>
							<view class="xiaohong">￥{{item.goodsprice.price}}</view>
						</view>
						<view class="flexbetween margin_top1">
							<view class="xiaohui">赠送积分：{{item.goodsprice.buy_send_score}}</view>
							<view class="xiaohui">兑换积分：{{item.goodsprice.dh_score}}</view>
						</view>

					</view>
				</view>
				<view class="mainpadding_top flexbetween itemline">
					<view class="flexcenter" @click.stop="edit('/pages/workbench/jiben/shangpindaadd?id=',item.id,20)">
						<u-icon name="edit-pen" color="#666" size="18"></u-icon>
						<view class="strongtext">编辑</view>
					</view>
					<view class="flexcenter" @click.stop="sharewx(item.image_text)">
						<u-icon name="share" color="#666" size="18"></u-icon>
						<view class="strongtext">分享</view>
					</view>
					<view class="flexcenter" v-show="item.status=='hidden'" @click.stop="upStatus(item)">
						<u-icon name="arrow-up" color="#666" size="18"></u-icon>
						<view class="strongtext">上架</view>
					</view>
					<view class="flexcenter" v-show="item.status=='normal'" @click.stop="upStatus(item)">
						<u-icon name="arrow-down" color="#666" size="18"></u-icon>
						<view class="strongtext">下架</view>
					</view>
					<view class="flexcenter" @click.stop="delItem(item.id,21)">
						<u-icon name="trash" color="#666" size="18"></u-icon>
						<view class="strongtext">删除</view>
					</view>
				</view>
			</view>
		</view>
		<moDal :message="{modalShow:modal.modalShow,title:modal.title}" @modalSure="modalSure"></moDal><!-- 模态框 -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				page: 1,
				limit: 12,
				list: {
					data: [],

				},
				keyword: "",
				status: "",
				dataAll: {
					total_num: "",
					sj_num: "",
					xj_num: "",
				},
				// 模态框
				modal: {
					modalShow: false,
					title: "",
				},
				currentId: "",
				type: "",
			}
		},
		onLoad(options) {
			if (options.type) {
				this.type = options.type
			}
			if (options.keyword) {
				this.keyword = options.keyword
			}

		},
		onShow() {
			this.init()
		},
		methods: {
			sharewx(img){
				uni.share({
				    provider: 'weixin',
				    scene: "WXSceneSession",
				    type: 5,
				    imageUrl: img,
				    title: '询博云计算',
				    miniProgram: {
				        id: 'gh_9e770ff92e84',
				        path: 'pages/index/index',
				        type: 0,
				        webUrl: 'http://uniapp.dcloud.io'
				    },
				    success: ret => {
				        console.log(JSON.stringify(ret));
				    }
				});
			},
			selectRole(item) {
				if (this.type == 1) {
					let e = {
						id: item.id,
						name: item.name
					}
					uni.$emit("spSelectFn", e)
					uni.navigateBack(1)
				} else {
					this.edit('/pages/workbench/jiben/shangpindaadd?id=', item.id, 20)
				}
			},
			delItem(id, qxpdid) {
				if (!httpRequest.qxpd(qxpdid, this.$store.state.userInfo.ability_rule_ids)) {
					return false
				}
				this.modal.modalShow = true
				this.modal.title = "确定删除当前内容吗"
				this.currentId = id
			},
			modalSure() {
				httpRequest.request('/dhtapi/goods/deleteGoods', 'POST', {
					id: this.currentId
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.init()
					}
				})
			},
			upStatus(item) {
				httpRequest.request("/dhtapi/goods/czGoods", 'GET', {
					id: item.id,
					status: item.status == "normal" ? "hidden" : "normal"
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg);
					if (res.code == 1) {
						item.status = item.status == "normal" ? "hidden" : "normal"
					}
					this.init()
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			changeStatus(val) {
				this.status = val
				this.init()
			},
			init(isPage, page) {
				let _this = this;
				httpRequest.request("/dhtapi/goods/index", 'GET', {
					page: page || 1,
					limit: _this.limit,
					status: this.status,
					keyword: this.keyword,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = resList
							_this.list.data = resList.data;
						}
					}
					this.dataAll = JSON.parse(JSON.stringify(res.data))
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			getGuige(item) {
				if (item.big_goods_unit_id && item.middle_goods_unit_id) {
					return 3
				}
				if (item.big_goods_unit_id && !item.middle_goods_unit_id) {
					return 2
				}
				if (!item.big_goods_unit_id && !item.middle_goods_unit_id) {
					return 1
				}
			},
			jumpurl(url, qxpdid) {
				if (!httpRequest.qxpd(qxpdid, this.$store.state.userInfo.ability_rule_ids)) {
					return false
				}
				uni.navigateTo({
					url
				})
			},
			edit(url, val, qxpdid) {
				if (!httpRequest.qxpd(qxpdid, this.$store.state.userInfo.ability_rule_ids)) {
					return false
				}
				uni.navigateTo({
					url: url + val
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.itemline {
		border-top: 1rpx solid rgba(0, 0, 0, 0.05);
	}

	.leftimg {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;

		image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 10rpx;
		}
	}

	.strongtext1 {
		font-size: 28rpx;
		line-height: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
	}

	.xiaobig {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100rpx;
		background: #e7f9fa;
		height: 36rpx;
		border-radius: 0 20rpx 0 20rpx;
	}
</style>